<template>
	<el-dialog title="排名情况" :visible.sync="dialog" :close-on-click-modal="false"  width="820px">
		<transition name="el-fade-in-linear">
			<div class="ranking-box" style="margin-top:-10px"  v-loading="loading">
				<div class="top dl-row">
					<div class="number">排名</div>
					<div class="name">姓名</div>
					<div class="timeWidth">检测时间</div>
					<div class="user-score">得分</div>
				</div>
				<ul class="score-main" style="overflow:auto">
					<li class="dl-row center"
						v-for="(rank,rankIndex) in data"
						:key="rankIndex">
						<div class="number first">
							<!-- <img :src="firstImg" v-if="rank.rank==1">
							<img :src="secondImg" v-else-if="rank.rank===2">
							<img :src="thirdImg" v-else-if="rank.rank===3">
							<p v-else>{{rank.rank}}</p> -->
							<p>{{rank.rank}}</p>
						</div>
						<div class="name dl-row center">
							<h1>{{rank.userName}}</h1>
						</div>
						<div class="timeWidth center">
							<h1>{{rank.createTime | formateDate}}</h1>
						</div>
						<div class="user-score">{{rank.score}}</div>
					</li>
				</ul>
			</div>
		</transition>
		<el-pagination
				:total="total" 
				:current-page="page + 1"
				style="margin-top: 8px;"
				layout="total, prev, pager, next, sizes"
				@size-change="sizeChange"
				@current-change="pageChange"/>
	</el-dialog>
</template>

<script>
	import {scoreBankList} from '@/api/practice'
	import initData from '@/mixins/initData'
	import { formateDate } from '@/utils/index'
	export default {
	    mixins: [initData],
	    data() {
	        return {
				loading:false,
				dialog:false,
				bankId: '',
				rankList:[],
				firstImg: require('../../../assets/image/first.png'),
				secondImg: require('../../../assets/image/second.png'),
				thirdImg: require('../../../assets/image/third.png'),
	        }
	    },
		filters: {
		  formateDate (time) {
			  if(time){
				 let date = new Date(time)
				 return formateDate(date, 'yyyy-MM-dd hh:mm:ss') 
			  }
		  }
		},
		watch: {
		  'bankId': {
		    handler: function (newVal, oldVal) {
				this.bankId=newVal;
				this.init()
		    },
		    deep: true
		  }
		},
	    methods: {
	        beforeInit() {
	            this.url = 'practice/bank-list'
	            this.params = {page: this.page,
				 size: this.size,
				 bankId: this.bankId,
				 }
	            return true
	        }
	    }
	}
</script>

<style>
	
</style>